<script setup lang="ts">
import lCircle from '../l-circle/l-circle.vue'
import { useDeviceStore } from '@/stores'
import { ref } from 'vue'
import { onUnload, onPullDownRefresh } from '@dcloudio/uni-app'
import { onMounted } from 'vue'
import { useReportStore } from '@/stores'
import { getReportDetailApi, getWeekReportApi } from '@/services/report'
const deviceStore = useDeviceStore()
const reportStore = useReportStore()
const modelVale = ref(0)
const props = defineProps<{
  id: number
  deviceNum: string
}>()
//每隔一段时间获取用户的实时数据
const timer = setInterval(async () => {
  console.log(props.id)
  await deviceStore.getDeviceData(props.id)
}, 120000)

onUnload(() => {
  if (timer) {
    clearInterval(timer)
  }
})

//跳转周报和日报
const drawWeekReport = async () => {
  const res = await getReportDetailApi({
    date: deviceStore.devicedetail?.dateFormat as string,
    mtrlId: deviceStore.devicedetail?.deviceNum as string,
  })
  const weekres = await getWeekReportApi({
    date: deviceStore.devicedetail?.dateFormat as string,
    /* date:'2024-02-25', */
    mtrlId: deviceStore.devicedetail?.deviceNum as string,
  })
  console.log(weekres)
  reportStore.setWeekReport(weekres.data)
  reportStore.setReport(res.data)
  uni.navigateTo({
    url: `/pagesReport/week-report/week-report?id=${deviceStore.devicedetail?.deviceNum}&date=${deviceStore.devicedetail?.dateFormat}`,
  })
}

const getData = async () => {
  deviceStore.getDeviceData(props.id)
  //console.log(deviceStore.devicedetail + '222')
}

const drawAlarmList= () => {
  uni.navigateTo({
    url: `/pages/alarm/alarm?deviceNum=${props.deviceNum}`,
  })
}

onMounted(() => {
  console.log(props.deviceNum)
  getData()
})
onPullDownRefresh(async () => {
  await deviceStore.getDeviceData(props.id)
  uni.stopPullDownRefresh()
})
const back = () => {
  uni.navigateBack({
    delta: 1,
  })
}
</script>

<template>
  <view class="content">
    <view class="back">
      <u-icon name="arrow-left" color="#ffff" size="22" @click="back"></u-icon>
    </view>
    <view class="info_card">
      <view class="prile_box">
        <up-avatar :src="deviceStore.devicedetail?.picture" size="74"></up-avatar>
        <view class="prile">
          <text v-if="deviceStore.devicedetail">{{ deviceStore.devicedetail!.name }}</text>
          <text v-if="deviceStore.devicedetail"
            >{{ deviceStore.sex }} | {{ deviceStore.devicedetail.age + '岁' }} |
            {{ deviceStore.devicedetail.weight + 'kg' }}
          </text>
          <text v-if="deviceStore.deviceList && deviceStore.deviceList.length > 0">{{
            '设备ID:' + deviceStore.devicedetail?.deviceNum
          }}</text>
          <text v-else>暂无设备</text>
        </view>
      </view>
      <u-grid :border="false">
        <u-grid-item>
          <view class="body_data" v-if="deviceStore.devicedetail">{{
            deviceStore.devicedetail.isInBed ? '在床' : '离床'
          }}</view>
          <view class="body_data" v-else style="margin-bottom: 23.077rpx">{{ '' }}</view>
          <view class="status">状态</view>
        </u-grid-item>
        <u-grid-item>
          <view class="body_data">{{
            deviceStore.devicedetail?.heart === 0 ? '--' : deviceStore.devicedetail?.heart
          }}</view>
          <view class="parameter">次/分</view>
          <view class="status">心率</view>
        </u-grid-item>
        <u-grid-item>
          <view class="body_data">{{
            deviceStore.devicedetail?.breath === 0 ? '--' : deviceStore.devicedetail?.breath
          }}</view>
          <view class="parameter">次/分</view>
          <view class="status">呼吸</view>
        </u-grid-item>
      </u-grid>
    </view>
    <view class="alarm" @click="drawAlarmList">
      <u-icon name="volume-fill" color="#14bcfe" size="20"></u-icon>
      <view :class="{ unReadAlarm: deviceStore.devicedetail?.unReadAlarmCount }"   class="alarm_count"  >{{
        deviceStore.devicedetail?.unReadAlarmCount ?  `您有${deviceStore.devicedetail?.unReadAlarmCount}条警报信息待查看`
     : '暂无未读的警报信息'
      }}</view>
      <u-icon name="arrow-right" color="#cbcbcb" size="17"   top="1" ></u-icon>
    </view>
    <text class="yesterday_review">昨日的评价</text>
    <view class="review_card">
      <view class="circleprogress">
        <l-circle
          v-model:current="modelVale"
          :percent="deviceStore.devicedetail?.score"
          strokeColor="#1684fc"
          trailColor="#efefef"
          lineCap="butt"
          strokeWidth="8"
          trailWidth="8"
        >
          <view class="circle_inner">
            <view
              class="circletext"
              v-if="deviceStore.devicedetail?.score !== -1 && deviceStore.devicedetail?.score"
              >睡眠平衡指数</view
            >
            <view
              class="score"
              v-if="deviceStore.devicedetail?.score !== -1 && deviceStore.devicedetail?.score"
            >
              {{ Math.floor(deviceStore.devicedetail?.score) }}</view
            >
            <view class="noscore" v-else> 暂无睡眠得分</view>
          </view>
        </l-circle>
      </view>
      <view class="suggestion_box">
        建议您使用SC500设备监测您的睡眠质量,&nbsp&nbsp我们将会根据设备数据为您实时监测健康并提供专业健康建议
      </view>
    </view>
    <view class="button_box">
      <u-button type="primary" shape="circle" color="#3780A6" @click="drawWeekReport"
        >睡眠报告</u-button
      >
    </view>
  </view>
</template>

<style lang="scss">
.content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url(@/static/starry.jpg) no-repeat;
  background-size: contain;
  .button_box {
    width: 634.615rpx;
    height: 76.923rpx;
    margin-top: 196.154rpx;
  }
  .back {
    position: absolute;
    top: 105.769rpx;
    left: 3%;
  }
  .info_card {
    margin-top: 282.692rpx;
    width: 651.923rpx;
    height: 378.846rpx;
    border-radius: 19.231rpx;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(187, 187, 187, 1);
    .prile_box {
      padding-top: 26.923rpx;
      padding-left: 23.077rpx;
      width: 576.923rpx;
      display: flex;
      font-size: 26.923rpx;
      .prile {
        display: flex;
        height: 138.462rpx;
        padding-left: 38.462rpx;
        flex-direction: column;
        justify-content: space-between;
        font-family: PingFangSC-light;
      }
    }
    .body_data {
      margin-top: 50rpx;
      height: 53.846rpx;
      font-size: 38.462rpx;
    }
    .status {
      font-size: 30.769rpx;
      color: #9a9a9a;
    }
    .parameter {
      font-size: 26.923rpx;
      color: #9a9a9a;
      font-family: PingFangSC-light;
    }
  }
  .alarm {
    width: 600rpx;
    height: 57.692rpx;
    margin-top: 28.846rpx;
    display:flex;
    align-items: center;
    .alarm_count{
      font-size: 26.923rpx;
      margin-left: 19.231rpx;
      margin-right: 192.308rpx;
      width: 346.154rpx;
    }
    .unReadAlarm{
      color: #f3c444;
    }
  }
  .yesterday_review {
    margin: 65.385rpx 0 9.615rpx 65.385rpx;
    font-size: 38.462rpx;
    align-self: start;
  }
  .review_card {
    display: flex;
    width: 651.923rpx;
    height: 300rpx;
    border-radius: 19.231rpx;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(187, 187, 187, 1);
    .circleprogress {
      width: 257.692rpx;
      height: 192.308rpx;
      padding: 38.462rpx 0 48.077rpx 19.231rpx;
      .circle_inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 19.231rpx;
        .circletext {
          font-size: 23.077rpx !important;
          color: #9a9a9a;
        }
        .score {
          font-size: 38.462rpx !important ;
        }
        .noscore {
          font-size: 23.077rpx;
        }
      }
    }
    .suggestion_box {
      align-self: center;
      padding-top: 19.231rpx;
      width: 369.231rpx;
      height: 184.615rpx;
      font-size: 25rpx;
      line-height: 36.538rpx;
      color: #9a9a9a;
    }
  }
}
</style>
